<template>
  <div>
    <h2>学科管理</h2>
    <el-button class="mt10" type="danger" @click="showDialog"
      >添加学科</el-button>
       <el-row class="mt10">
            <el-col :span="8">
                <el-input placeholder="请输入关键字" v-model="keyword" ></el-input>
            </el-col>
            <el-col :span="8" class="ml10">
                <el-button type="success" @click="todoSearch">搜索</el-button>
                <el-button type="danger" @click="resetSearch">重置</el-button>
            </el-col>
        </el-row>
        
    <el-row class="mt10"> </el-row>

    <el-row class="mt10">
      <el-table :data="xlist" border style="width: 100%" center>
        <el-table-column prop="id" label="序号ID" width="180" align="center" />
        <el-table-column
          prop="name"
          label="学科名称"
          width="180"
          align="center"
        />
        <el-table-column label="IDS" align="center">
          <template #default="scope">
            <el-tag>{{ scope.row._id+1 }}</el-tag>
            <!-- row 表示一行数据 -->
          </template>
        </el-table-column>
        <el-table-column
          prop="value"
          label="学科编码"
          width="180"
          align="center"
        />

        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-popconfirm
              title="你真的打算删除这个数据吗?"
              @confirm="confirmdelete(scope.row)"
            >
              <template #reference>
                <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
            <el-button type="info" size="small" @click="updateItem(scope.row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-dialog
      v-model="show"
      title="添加学科"
      width="30%"
      :before-close="handleClose"
    >
      <div>
        <el-form
          label-position="left"
          class="myform"
          status-icon
          :model="form"
          ref="uform"
          size="default"
          :rules="rules"
        >
          <el-form-item label="学科名称" prop="name">
            <el-input
              :prefix-icon="Coin"
              v-model="form.name"
              type="text"
              placeholder="请输入学科名称"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="学科编码" prop="value">
            <el-input
              :prefix-icon="Coin"
              v-model="form.value"
              type="text"
              placeholder="请输入学科编码"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="info" @click="handleClose">取消</el-button>
          <el-button type="danger" @click="confirmAction">添加学科</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog
      v-model="uVisible"
      title="修改学科"
      width="35%"
      :before-close="closeDialog"
    >
      <div>
        <el-form
          ref="updateform"
          :model="xform"
          :rules="rules"
          label-width="100px"
          class="myform"
          label-position="top"
        >
          <el-form-item label="学科名称" prop="name">
            <el-input
              :prefix-icon="Coin"
              v-model="xform.name"
              type="text"
              placeholder="请输入学科名称"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="学科编码" prop="value">
            <el-input
              :prefix-icon="Coin"
              v-model="xform.value"
              type="text"
              placeholder="请输入学科编码"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="info" @click="closeDialog">取消</el-button>
          <el-button type="danger" @click="updateFormAction">确定修改</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>


<script setup>
import { onMounted, reactive, ref, toRefs } from "vue";
import {ArrowDown,Delete,Remove, Coin,Lock,ArrowLeft, ArrowRight,} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { Http } from "@/api";
const keyword=ref()

const show = ref(false);
const form = ref({});
const uform = ref();
const xform = ref({});
const updateform = ref();
const uVisible = ref(false);
const rules = reactive({
  name: [{ required: true, message: "请输入学科名称", trigger: "blur" }],
  value: [{ required: true, message: "请输入学科编码", trigger: "blur" }],
});

const state = reactive({
  xlist: [],
});
const showDialog = () => {
  show.value = true;
};
const handleClose = () => {
  show.value = false;
};
const getXuekeList = async (payload = {}) => {
  let res = await Http.xuekelist(payload);
  state.xlist = res.result;
};
onMounted(() => {
  getXuekeList();
});
const confirmAction = () => {
  uform.value.validate(async (valid) => {
    if (valid) {
      // ajax
      let res = await Http.xuekeadd(form.value);
      if (res.code == 200) {
        handleClose();
         getXuekeList()
      }
    } else {
      ElMessage.error("请输入有效的学科信息");
    }
  });
};


// 搜索学科
const todoSearch=()=>{
  getXuekeList({
    // 绑定关键字
    keyword:keyword.value
  })
}

// 重置输入框
const resetSearch=()=>{
  // 内容置空
  keyword.value="",
  getXuekeList()  // 重新学科请求数据
}
// 删除学科
const confirmdelete = async (item) => {
  let res = await Http.xuekedel({ _id:item._id });
  if (res.code == 200) {
    //  前端删除
      getXuekeList()
  }
};

// 修改学科
const updateItem = (item) => {
  uVisible.value = true;
  // xform.value=item //把原本的数据可以带到弹出的form表单中
  xform.value={...item}  //把原本的数据可以带到弹出的form表单中
  state.xform=Object.assign({},item);
};

// 关闭
const closeDialog = () => {
    updateform.value.resetFields()
    uVisible.value = false
};
// 确定修改
const  updateFormAction=()=>{
 updateform.value.validate(async valid=>{
     if(valid){
         let res = await Http.xuekeupdata(xform.value)
        
        //  console.log(JSON.parse(JSON.stringify(xform.value)));
         if(res.code==200){
            //  本地修改
            // xlist.value=xlist.value.map(item=>{
            //     if(item.id=xform.value.id){
            //         item = xform.value;
            //     }
            //     return item
            // })
             getXuekeList()
            closeDialog()
         }
     }else{
         ElMessage.error("请输入有效的学科信息")
     }
 })
};

const { xlist } = toRefs(state);
</script>